<template>
  <BaseDialog width="600px" :title="(!props.item.areaId ? '新增' : '编辑') + '台区'" :handleCancel="handleCancel"
    :dialogVisible="props.dialogVisible">
    <!-- <BaseForm
      type="rule"
      :handleOk="handleOk"
      :handleCancel="handleCancel"
      :items="formItems"
      v-model:form="ruleForm"
      :rules="rules"
      :refresh="handleSearch"
      label-width="100px"
    >
    </BaseForm> -->
    <el-form ref="ruleFormRef" :model="ruleForm" style="padding:16px 16px 0 16px" @submit="submitForm" label-width="100px"
      :rules="rules">
      <el-form-item label="台区名称" prop="areaName">
        <el-input style="width:383px" v-model="ruleForm.areaName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-row :gutter="10" v-for="(dto, index) in ruleForm.areaPowerLineDtoList" :key="index">
        <el-col :span="22">
          <el-form-item :class="index == 0 ? 'is-required' : ''" :label="index == 0 ? '供电线路' : ''" >
            <selectLine :item="dto" :powerSupplyIdList="props.powerSupplyIdList" @change="changeLine($event, index)">
            </selectLine>
          </el-form-item>
        </el-col>

        <el-col :span="2">
          <el-link v-if="ruleForm.areaPowerLineDtoList && ruleForm.areaPowerLineDtoList.length > 1" :underline="false"
            link type="danger" size="small" @click.prevent="handleLineDel(index)">删除</el-link>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:18px">
        <el-col :offset="5" :span="16">
          <el-button style="width:100%" type="primary"  @click="handleAddLine()"><el-icon>
              <Plus />
            </el-icon>增加供电线路</el-button>
        </el-col>
      </el-row>



      <el-form-item label="描述">
        <el-input style="width:383px" v-model="ruleForm.description" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea"
          maxlength="300" show-word-limit></el-input>
      </el-form-item>
      <div class="form-btn">
        <slot name="prefix-button" />
        <el-button @click="handleCancel"> 取 消 </el-button>
        <el-button type="primary" :loading="loading" native-type="submit">
          确 定
        </el-button>
        <slot name="suffix-button" />
      </div>
    </el-form>
  </BaseDialog>
</template>

<script setup lang="ts">
import BaseForm from '@/components/base-form.vue'
import BaseDialog from '@/components/base-dialog.vue'
import openMsgBox from '@/hooks/messageBox.js'
import type { FormInstance } from 'element-plus'
import { basicConfigService } from '@/api/basicConfig'
import selectLine from '@/components/selectLine.vue'
const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
  item: {
    type: Object,
  },

  handleSearch: {
    type: Function,
  },
  lineIdList: {
    type: Object,
  },
  powerSupplyIdList: {
    type: Object,
  },
})
const emit = defineEmits(['update:dialogVisible'])


const rules = reactive({
  areaName: [{ required: true, message: '请输入', trigger: 'change' }],
  areaPowerLineDtoList: [{ required: true, message: '请选择', trigger: 'change' }],
})
const ruleForm = ref({
  areaId: '',
  areaName: '',
  powerSupplyId: '',
  lineId: '',
  description: '',
  areaPowerLineDtoList: [{}],
})
const ruleFormRef = ref<FormInstance>()
const loading = ref(false)
const submitForm = (e) => {
  e.preventDefault()

  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
     
      let emptyList = ruleForm.value.areaPowerLineDtoList.find((n) => !n.lineId || !n.powerId)
      if (emptyList) {
        ElMessage({
          message: '供电单位和供电线路不能为空',
          type: 'error',
        })
        return
      }
      let list= ruleForm.value.areaPowerLineDtoList.map((n)=>{
        return n.powerId +'-'+ n.lineId
      })
      if(list.length>[...new Set(list)].length){
        ElMessage({
          message: '存在重复数据请检查',
          type: 'error',
        })
        return
      }
      loading.value = true
      if (ruleForm.value.areaId) {
        basicConfigService.areaUpdate({
          data: { ...ruleForm.value },
        }).then((res) => {
          handleCancel();
          props.handleSearch();

        }).catch(() => {
          loading.value = false
        })
      } else {
        basicConfigService.areaBatchSave({
          data: [{ ...ruleForm.value }],
        }).then((res) => {
          handleCancel();
          props.handleSearch();
        }).catch(() => {
          loading.value = false
        })
      }

    } else {

    }
  })

}
const changeLine = (val, index) => {

  ruleForm.value.areaPowerLineDtoList.splice(index, 1, val)

}

const handleOk = () => {
  if (props.item.areaId) {
    return basicConfigService.areaUpdate({
      data: { ...ruleForm.value },
    })
  } else {
    return basicConfigService.areaBatchSave({
      data: [{ ...ruleForm.value }],
    })
  }
}
const handleAddLine = () => {
  ruleForm.value.areaPowerLineDtoList.push({});
}
const handleLineDel = (index) => {
  openMsgBox(
    {},
    () => {
      ruleForm.value.areaPowerLineDtoList.splice(index, 1)

    },
    () => {
      //handleSearch()
    }
  )
}
const handleCancel = () => {
  emit('update:dialogVisible', false)
}
onMounted(() => {
  if (props.item.areaId) {
    ruleForm.value.areaId = props.item.areaId
    ruleForm.value.areaName = props.item.areaName
    ruleForm.value.areaPowerLineDtoList = props.item.areaPowerLineResDtoList && props.item.areaPowerLineResDtoList.length > 0 ? props.item.areaPowerLineResDtoList.map((n)=>{
      return {
        powerId:n.powerId,
        lineId:n.lineId
      }
    }) : [{}]
    ruleForm.value.description = props.item.description

  }
  else {
    ruleForm.value.areaPowerLineDtoList = [{}];
  }
})
</script>

<style lang="scss" scoped></style>
